<template>
  <!-- 灾情勘察 灾损统计 -->
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>灾情勘察</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <!-- <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" labelWidth="300px"> -->
      <filterTitle @query="query(form)" @reset="reset" :form="form" :formData="formData" san labelWidth="140px"
        @node-click="handleSelectTreeTabulation">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <!-- table1.isShowPage -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" @select-all="handleSelectionChange"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm"
        :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="false" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
      <div style="height: 30px;"></div>
      <LsdTable slot="gjxm" @select="handleSelectionChange1" @select-all="handleSelectionChange1"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table1.compRef" ref="gjxm"
        :columns="table1.columns" :title="table1.title" :actions="table1.actions" :tableData="table1.tableData"
        :tableAttr="table1.tableAttr" :isShowPage="false" :isSelectFlag="table1.isSelectFlag"
        :isSequenceFlag="table1.isSequenceFlag" @onActionClick="onActionClick" />
      <div style="height: 30px;"></div>
      <LsdTable slot="gjxm" @select="handleSelectionChange2" @select-all="handleSelectionChange2"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table2.compRef" ref="gjxm"
        :columns="table2.columns" :title="table2.title" :actions="table2.actions" :tableData="table2.tableData"
        :tableAttr="table2.tableAttr" :isShowPage="false" :isSelectFlag="table2.isSelectFlag"
        :isSequenceFlag="table2.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm ref="formComponent" slot="slot1" :formConfig="formConfig" @change="handleChange" />
        <DialogForm ref="formComponent1" slot="slot2" @change="handleChange1" :formConfig="formConfig1" />
        <DialogForm ref="formComponent2" slot="slot3" :formConfig="formConfig2" @getResourcesData="getResourcesData" />
        <DialogForm ref="formComponent3" slot="slot4" :formConfig="formConfig3" />
        <DialogForm ref="formComponent4" slot="slot5" :formConfig="formConfig4" />
      </LsdDialogTitle>
    </LsdDialog>
  </div>
</template>

<script>
import { zqkcStatistics } from "@/api/EmergencyDisposal/zqkc.js";
// 响应命令单 列表接口
import { xymldSubmissionList } from "@/api/EmergencyDisposal/xymld.js";
export default {
  name: "DamageStatisticsForm",
  components: {},
  data() {
    return {
      type: 0, // 区分编辑和新增
      multipleSelection: [], // 单选全选
      // 筛选信息
      formData: [
        {
          elType: "select",
          id: "sourceInfoId",
          label: "响应命令单",
          span: "10",
          // dic: "dic_xqlb",
          attrs: {
            value: "",
            size: "small",
            // clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: []
        }
      ],
      // 表格信息   变电
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "变电设备受损列表",
        actions: [
          // {
          //   id: "dialogVisible",
          //   text: "新增",
          //   type: "primary",
          //   btnAttr: { size: "small" }
          // }
          // {
          //   id: "ListAddyp",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [
        ],
        columns: [
          {
            prop: "sourceInfo",
            label: "响应命令单",
            align: "left",
            "min-width": "200px"
          },
          {
            prop: "deviceName",
            label: "变电站名称",
            align: "center"
          },
          {
            prop: "voltageLevel",
            label: "电压等级",
            align: "center"
          },
          {
            prop: "deviceType",
            label: "设备类型",
            align: "center"
          },

          {
            prop: "deviceDualName",
            label: "设备双重名称",
            align: "center"
          },
          {
            prop: "damagedPlace",
            label: "受损部位",
            align: "center"
          },
          {
            prop: "deviceModel",
            label: "设备型号",
            align: "center"
          },

          {
            prop: "manufacturer",
            label: "生产厂家",
            align: "center",
            "min-width": "100px"
          },
          {
            prop: "damagedOverview",
            label: "受损情况",
            align: "center"
          },
          {
            prop: "cz",
            label: "图片",
            align: "center",
            fixed: "right",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.handleCheckBd(row);
                          }
                        }
                      }}
                    >
                      查看
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          // "max-height": "490px",
          // height: "470px",
          "max-height": "300px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 输电
      table1: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "输电设备受损列表",
        actions: [
          // {
          //   id: "dialogVisible",
          //   text: "新增",
          //   type: "primary",
          //   btnAttr: { size: "small" }
          // }
          // {
          //   id: "ListAddyp",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [],
        columns: [
          {
            prop: "sourceInfo",
            label: "响应命令单",
            align: "left",
            "min-width": "230px"
          },
          {
            prop: "deviceName",
            label: "输电站名称",
            align: "center"
          },
          {
            prop: "voltageLevel",
            label: "电压等级",
            align: "center"
          },
          {
            prop: "poleTowerNum",
            label: "杆塔号",
            align: "center"
          },

          {
            prop: "poleTowerModel",
            label: "杆塔型号",
            align: "center"
          },
          {
            prop: "damagedPlace",
            label: "受损部位",
            align: "center"
          },
          {
            prop: "damagedOverview",
            label: "受损情况描述",
            align: "center"
          },

          {
            prop: "address",
            label: "定位",
            align: "left",
            "min-width": "100px"
          },

          {
            prop: "cz",
            label: "图片",
            align: "center",
            fixed: "right",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.handleCheckSd(row);
                          }
                        }
                      }}
                    >
                      查看
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "300px",
          // height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 配电
      table2: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "配电设备受损列表",
        actions: [
          // {
          //   id: "dialogVisible",
          //   text: "新增",
          //   type: "primary",
          //   btnAttr: { size: "small" }
          // }
          // {
          //   id: "ListAddyp",
          //   text: "研判",
          //   type: "",
          //   btnAttr: { size: "small" }
          // }
        ],
        tableData: [],
        columns: [
          {
            prop: "sourceInfo",
            label: "响应命令单",
            align: "left",
            "min-width": "230px"
          },
          {
            prop: "deviceName",
            label: "变电站名称",
            align: "center"
          },
          {
            prop: "deviceDualName",
            label: "线路双重名称",
            align: "center"
          },
          {
            prop: "spurName",
            label: "支线名称",
            align: "center"
          },

          {
            prop: "districtName",
            label: "设备/台区名称",
            align: "center"
          },
          {
            prop: "damagedPlace",
            label: "受损部位",
            align: "center"
          },
          {
            prop: "damagedOverview",
            label: "受损情况描述",
            align: "center"
          },

          {
            prop: "address",
            label: "定位",
            align: "left",
            "min-width": "100px"
          },
          {
            prop: "cz",
            label: "图片",
            align: "center",
            fixed: "right",
            "min-width": "100px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.handleCheckPd(row);
                          }
                        }
                      }}
                    >
                      查看
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "300px",
          // height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3", "4", "5"], // 折叠面板默认展开列
      form: {
        sourceInfoId: ""
      }, // 筛选from
      pageNum: 1,
      pageSize: 10,
      // 弹窗信息
      dialogConfig: {
        title: "勘察任务",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          // {
          //   name: "提交",
          //   id: "BSubmit", // 事件名
          //   type: "primary",
          //   size: "small"
          // },
          // {
          //   name: "保存",
          //   id: "submitForm",
          //   size: "small"
          // },
          {
            name: "取消",
            id: "Qxiao",
            size: "small"
          }
        ]
      },
      dialogConfig1: {
        title: "人员选择",
        isShow: false, // 弹窗显示隐藏
        btnList: [
          {
            name: "确认",
            id: "BSubmit1", // 事件名
            type: "primary",
            size: "small"
          },
          {
            name: "取消",
            id: "Qxiao1",
            size: "small"
          }
        ]
      },
      // 折叠面板信息
      titleConfig: [
        {
          title: "信息来源",
          name: "1",
          slot: "slot1"
        },
        {
          title: "任务信息",
          name: "2",
          slot: "slot2"
        },
        {
          title: "队伍信息",
          name: "3",
          slot: "slot3"
        },
        {
          title: "填报信息",
          name: "4",
          slot: "slot4"
        },
        {
          title: "审批意见",
          name: "5",
          slot: "slot5"
        }
      ],
      // 弹窗表单信息
      formConfig: {
        formData: [
          {
            type: "select",
            label: "响应命令单",
            prop: "responseName",
            // dic: "dic_xxly",
            class: "sjgy",
            lableWidth: "120px",
            option: []
          }
        ],
        rules: {
          responseName: [
            { required: true, message: "请选择响应命令单", trigger: "change" }
          ]
        }
      },
      // 弹窗表单信息
      formConfig1: {
        formData: [
          // {
          //   type: "input",
          //   label: "预警信息",
          //   prop: "warningInfo",
          //   class: "sjgy",
          //   lableWidth: "100px"
          // },
          {
            type: "input",
            label: "任务名称",
            prop: "surveyName",
            class: "half",
            lableWidth: "130px"
          },
          {
            type: "select",
            label: "任务类型",
            prop: "taskType",
            dic: "dic_kclx",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "select",
            label: "派发单位/部门",
            prop: "distributedUnitId",
            // dic: "dic_yjjb",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "dataPicker",
            label: "要求完成时间",
            prop: "planFinishTime",
            class: "half",
            dateType: "datetimerange",
            lableWidth: "130px"
          },
          {
            type: "select",
            label: "责任单位/部门",
            prop: "dutyUnitId",
            // dic: "dic_yjjb",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "select",
            label: "责任人",
            prop: "dutyOfficerId",
            dic: "dic_yjjb",
            class: "half",
            lableWidth: "130px",
            option: []
          },
          {
            type: "input",
            label: "任务地点",
            prop: "taskAddress",
            class: "sjgy",
            lableWidth: "130px"
          },
          {
            type: "input",
            label: "任务内容",
            prop: "taskContent",
            class: "sjgy",
            lableWidth: "130px"
          },
          {
            type: "upload",
            label: "附件",
            action: "",
            prop: "ztqks",
            lableWidth: "130px"
          }
        ],
        rules: {
          surveyName: [
            {
              required: true,
              message: "请输入任务名称",
              trigger: "change"
            }
          ],
          taskType: [
            { required: true, message: "请选择任务类型", trigger: "change" }
          ],
          distributedUnitId: [
            { required: true, message: "请选择派发单位/部门", trigger: "change" }
          ],
          // incidentOutline: [
          //   { required: true, message: "请输入事件概要", trigger: "change" }
          // ],
          planFinishTime: [
            { required: true, message: "请选择要求完成时间", trigger: "change" }
          ],
          dutyUnitId: [
            { required: true, message: "请选择责任单位/部门", trigger: "change" }
          ],
          dutyOfficerId: [
            { required: true, message: "请选择责任人", trigger: "change" }
          ],
          taskAddress: [
            { required: true, message: "请输入任务地点", trigger: "change" }
          ],
          taskContent: [
            { required: true, message: "请输入任务内容", trigger: "change" }
          ]
        }
      },
      // 弹窗表单信息
      formConfig2: {
        formData: [
          {
            type: "btnInput",
            label: "选择队伍",
            value: "请选择",
            prop: "emergencyEvent",
            class: "sjgy",
            lableWidth: "150px"
          }
        ]
      },
      // 填报信息
      formConfig3: {
        disabled: true,
        formData: [
          {
            type: "input",
            label: "填报人",
            prop: "creator",
            class: "third",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "单位及部门",
            class: "third",
            prop: "createDeptName",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "填报时间",
            class: "third",
            prop: "createTime",
            lableWidth: "100px"
          }
        ]
      },
      // 审核信息
      formConfig4: {
        disabled: true,
        formData: [
          {
            type: "input",
            label: "审核意见",
            prop: "approveSign",
            class: "sjgy",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "审核人",
            prop: "creator",
            class: "third",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "单位及部门",
            class: "third",
            prop: "createDeptName",
            lableWidth: "100px"
          },
          {
            type: "input",
            label: "审核时间",
            class: "third",
            prop: "createTime",
            lableWidth: "100px"
          }
        ]
      }
      // form: {},

    };
  },
  watch: {
  },
  mounted() {
    // }
  },
  created() {
    this.getInputVal();
  },
  methods: {
    //  响应命令单选择的数据
    handleChange(val) {
      console.log(val);
    },
    handleChange1(val) {
      console.log(val);
    },
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    handleBtn1(item) {
      this[item.id]();
    },
    // 列表
    list() {
      console.log(this.form, "????this.form.sourceInfoId");
      console.log(this.form.sourceInfoId, "????11222sourceInfoId");
      zqkcStatistics({ ...this.form }).then(res => {
        console.log(res);
        this.table.tableData = res.bdDamaged; // 站内设备受损详情 - 变电
        this.table1.tableData = res.sdDamaged; // 输电设备受损详情
        this.table2.tableData = res.pdDamaged; // 配设备受损详情
        this.paginationAtrrs.total = res.total;
      });
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.list();
      this.getInputVal();
    },
    // 检索
    async query() {
      const parmas = {
        sourceInfoId: this.form.sourceInfoId
      };
      const res = await zqkcStatistics(parmas);
      this.table.tableData = res.bdDamaged; // 站内设备受损详情 - 变电
      this.table1.tableData = res.sdDamaged; // 输电设备受损详情
      this.table2.tableData = res.pdDamaged; // 配设备受损详情
      this.paginationAtrrs.total = res.total;
    },
    handleSelectionChange1(val) {
      console.log(val);
    },
    handleSelectionChange2(val) {
      console.log(val);
    },
    // 取消
    Qxiao() {
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$refs.formComponent4.form = this.$refs.formComponent4.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
        this.$refs.formComponent4.$refs.formInlines.clearValidate();

      });
    },
    // 取消
    Qxiao1() {
      this.dialogConfig1.isShow = false;
    },
    // 弹窗关闭图标
    close() {
      this.$refs.formComponent.form = this.$refs.formComponent.$options.data().form;
      this.$refs.formComponent1.form = this.$refs.formComponent1.$options.data().form;
      this.$refs.formComponent2.form = this.$refs.formComponent2.$options.data().form;
      this.$refs.formComponent3.form = this.$refs.formComponent3.$options.data().form;
      this.$refs.formComponent4.form = this.$refs.formComponent4.$options.data().form;
      this.$nextTick(() => {
        this.$refs.formComponent.$refs.formInlines.clearValidate();
        this.$refs.formComponent1.$refs.formInlines.clearValidate();
        this.$refs.formComponent2.$refs.formInlines.clearValidate();
        this.$refs.formComponent3.$refs.formInlines.clearValidate();
        this.$refs.formComponent4.$refs.formInlines.clearValidate();

      });
      this.dialogConfig.isShow = false;
    },
    // 弹窗关闭图标
    close1() {
      this.dialogConfig1.isShow = false;
    },
    // 变电 查看
    handleCheckBd(val) {
      console.log(val);
    },
    // 输电
    handleCheckSd(val) {
      console.log(val);
    },
    // 配电
    handleCheckPd(val) {
      console.log(val);
    },
    // 获取下拉框数据
    getInputVal() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      this.formData.map(item => {
        if (item.label === "响应命令单") {
          xymldSubmissionList(parmas).then(res => {
            const option = res.data.map((item) => {
              // console.log(item)
              var sourceInfo = item.responseName;
              return {
                label: sourceInfo,
                value: item.id
              };
            });
            item.options = option;
            // console.log(option, "???option");
            this.$set(this.form, "sourceInfoId", option[0].value);
            this.list();
            // console.log(this.form.sourceInfoId, "???1111111111111111");
          });
        }
      });
    },

    // 人员选择
    getResourcesData() {
      console.log("选择");
      this.dialogConfig1.isShow = true;
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 详情
    detailList(id) {
      this.$router.push({
        name: "InformationDetail",
        query: { id: id.id }
      });
    },
    // 选择器
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看
    HanDetail(id) {
      this.$router.push({
        path: "/StatisticalDetails"
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.list();
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

// .EmergencyList :deep(.el-input__inner) {
//   width: 420px !important;
// }

// .EmergencyList :deep(.el-input__suffix) {
//   right: -175px;
// }

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.box {
  margin-top: 20px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

/deep/ .title {
  margin-bottom: 20px;
}
</style>
